<!-- 新增或编辑菜单 -->
 <template>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="上级菜单" prop="parentId">
            <!-- :disable-branch-nodes="true"  加了这段代码，就只能选没有父节点的元素了 -->

            <!-- :disabled="formValidate.id != '' || formValidate.parentId != ''" -->
            <treeselect :options="options" v-model="formValidate.parentId" :show-count="true" placeholder="请选择上级菜单" />
        </FormItem>
        <FormItem label="菜单名称" prop="menuName">
            <!-- :disabled="formValidate.id != ''" -->
            <Input v-model="formValidate.menuName" placeholder="请输入菜单名称"></Input>
        </FormItem>
        <FormItem label="菜单图标" prop="menuIco" style="position: relative">
            <Input v-model="formValidate.menuIco" placeholder="请选择菜单图标" @on-focus="focus" style="width: 94%"></Input>
            <i class="bi" :class="formValidate.menuIco" style="font-size: 30px; color: #666; float: right"></i>
            <div class="selectIcon" v-if="showIcon" @mouseleave="mouseleave">
                <i
                    class="bi"
                    :class="'bi-' + item.name"
                    v-for="item in iconList"
                    v-bind:key="item.name"
                    style="font-size: 20px; color: #666"
                    @click="getIcon('bi-' + item.name)"
                ></i>
            </div>
        </FormItem>
        <FormItem label="显示排序" prop="menuSort">
            <Input type="number" v-model="formValidate.menuSort" placeholder="请输入显示排序"></Input>
        </FormItem>
        <FormItem label="路由地址" prop="menuUrl">
            <Input v-model="formValidate.menuUrl" placeholder="请输入路由地址"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
            <!-- <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button> -->
        </FormItem>
    </Form>
</template>



<script>
import {AjaxCommon} from '@/libs/apiCommon'
import {PopupCommon} from '@/libs/popupCommon'
import {Utility, IconNames} from '@/libs/utility'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
    props: ['setData', 'allMenu'],
    components: {Treeselect},
    data() {
        return {
            itemMenu: {},
            showIcon: false,
            iconList: [],
            value: null,
            options: [],
            formValidate: {
                parentId: '',
                menuIco: '',
                menuName: '',
                menuUrl: '',
                menuSort: 1,
                id: ''
            },
            ruleValidate: {
                // parentId: [{required: true, message: '请选择上级菜单', trigger: ['blur', 'change']}],
                // menuIco: [{required: true, message: '请选择图标', trigger: ['blur', 'change']}],
                menuSort: [{required: true, message: '请输入排序', trigger: ['blur', 'change']}],
                menuName: [{required: true, message: '请输入菜单名称', trigger: ['blur', 'change']}],
                menuUrl: [{required: true, message: '请输入路由地址', trigger: ['blur', 'change']}]
            }
        }
    },
    methods: {
        mouseleave() {
            this.showIcon = false
        },
        getIcon(name) {
            this.formValidate.menuIco = name
            this.showIcon = false
        },
        focus() {
            this.showIcon = true
        },
        getBootstrapIcons() {
            // 正常应该按照下面这种各种写法，但是打包的时候好像会icon打包进去
            // // 匹配 bootstrap-icons 包中的所有 SVG 文件
            // // 路径根据实际 node_modules 中 bootstrap-icons 的安装位置调整
            // const iconsContext = require.context(
            //     'bootstrap-icons/icons', // SVG 图标所在目录
            //     false, // 不递归子目录
            //     /\.svg$/ // 匹配 .svg 后缀的文件
            // )
            // // 提取图标名称（文件名即图标名，不含 .svg 后缀）
            // const icons = iconsContext.keys().map((key) => {
            //     // 例如：./alert-circle.svg → alert-circle
            //     const iconName = key.replace('./', '').replace('.svg', '')
            //     return {
            //         name: iconName
            //         // 如果需要直接加载 SVG 内容，可通过 import 实现
            //         // svg: iconsContext(key) // 仅在构建工具支持导入 SVG 为字符串时可用
            //     }
            // })
            // return icons
            return IconNames
        },
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$emit('getData', this.formValidate)
                }
            })
        },
        // handleReset(name) {
        //     this.$refs[name].resetFields()
        // }
        initParentMenu() {
            let allMenu = this.allMenu
            if (allMenu && allMenu.length > 0) {
                let treeDataList = []
                Utility.createMenuTreeData(allMenu, treeDataList)
                if (treeDataList && treeDataList.length > 0) {
                    this.options = [
                        {
                            id: '',
                            label: '--'
                        }
                    ].concat(treeDataList)
                }
            } else {
                this.options = [
                    {
                        id: '',
                        label: '--'
                    }
                ]
            }
        }
    },
    created() {
        // 编辑 或 新增子级
        if (this.setData) {
            this.formValidate = this.setData
        }
        this.initParentMenu()
        const icons = this.getBootstrapIcons()
        this.iconList = icons
    },
    mounted() {
        // this.$nextTick(() => {
        // })
    }
}
</script>

<style lang="scss">
.selectIcon {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 156px;
    z-index: 999999;
    border: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 4px;
    padding: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    .bi {
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;
    }
}
</style>
